<template>
	<view class="container" style="padding-bottom: 70rpx;">
		<!-- 引入的组件 -->
		<view :style="{'height':titleHeight*2 + 'rpx'}">
			<navigationBar :my-property='aa' />
		</view>
		<image :src="e_jiaoyi" mode="" class="top-img"></image>
		<view class="center-box">
			<view class="" v-if="dataList&&dataList.length>0">
				<view v-for="(item,index) in dataList" :key="index" class="cb-item">
					<view class="ci-time">{{item.transactionTime+' '+getTransactionMethod(item.transactionMethod)}}
					</view>
					<!-- <view class="ci-name">权益名称</view> -->
					<view class="ci-name">{{item.virtualGoodsName}}</view>
					<view class="ci-jieshu">购买{{item.baseNum}}{{item.transactionType=='1'?'次':'节'}}</view>
					<view class="ci-jieshu" v-if="item.extraNum&&item.extraNum!=0">
						<view>赠送{{item.extraNum?item.extraNum:0}}{{item.transactionType=='1'?'次':'节'}}</view>
					</view>
					<view class="ci-jieshu">实付金额：<span style="color: #FF7241;">{{item.transactionType=='1'?'+':'-'}}{{item.paymentAmount}}</span></view>
					<!-- <view class="divider-line" style="margin-top: 30rpx;"></view> -->
					<!-- <view class="ci-bottom">
						<view class="">补充</view>
						<view class="" style="margin-left: 50rpx;">退款</view>
					</view> -->
					<view class="ci-tag flex-cc" :style="{background:item.transactionStatus=='1'?'#32BFC0':'#BCBFBB'}">
						<view>
							{{
							item.transactionStatus=='0'?'未支付':
							item.transactionStatus=='1'&&item.transactionType=='1'?'支付成功':
							item.transactionStatus=='1'&&item.transactionType=='0'?'退款成功':
							'支付失败'
							}}
							</view>
					</view>
				</view>
			</view>
			<view v-else style="width: 100%;height: 500rpx;" class="flex-cc">
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import navigationBar from "@/components/navigationBar/navigationBar.vue";
	import {
		get_transaction_list
	} from '@/common/api/scl_api.js'
	export default {
		components: {
			navigationBar
		},
		data() {
			return {
				aa: {
					"bg_color": "rgba(0,0,0,0)",
					"color": "#FFFFFF",
					"flag": 1,
					"name": '我的账单'
				},
				e_jiaoyi: this.imgBaseURL + '/equity/e_jiaoyi_new.png',
				dataList: null,
				pageNo: 1
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			getTransactionMethod(transactionMethod) {
				let text;
				switch (transactionMethod) {
					case 0:
						text = '小程序购买'
						break;
					case 1:
						text = '小程序下单'
						break;
					case 2:
						text = '大众点评'
						break;
					case 3:
						text = '银联'
						break;
					case 4:
						text = '电商支付'
						break;
					case 5:
						text = '电商支付'
						break;
					case 6:
						text = '电商支付'
						break;
					default:
						text = '其它'
						break;
				}
				return text
			},
			// 初始化信息
			init() {
				get_transaction_list().then(res => {
					this.dataList = res.data.data.rows;
				})
			},
		}
	}
</script>

<style>
	@import url('userBill.css');
</style>
